
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script type="text/javascript" src="https://google-site-coin-slider.googlecode.com/svn/trunk/dock/interface.js"></script>

<style>
body {
	font: 11px Arial, Helvetica, sans-serif;
	background: #ffffff url(images/main-bg.gif);
	padding: 0;
	margin: 0;
}
img {
	border: none;
}

/* dock - top */
.dock {
	position: relative; 
	height: 50px; 
	text-align: center;
}
.dock-container {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg2_.gif);
	padding-left: 20px;
}
a.dock-item {
	display: block;
	width: 40px;
	color: #000;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
.dock-item span {
	display: none; 
	padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
	width: 100%;
	bottom: 0px;
	position: absolute;
	left: 0px;
}
.dock-container2 {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg.gif);
	padding-left: 20px;
}
a.dock-item2 {
	display: block; 
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px; 
	color: #000; 
	bottom: 0px; 
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 span {
	display: none;
	padding-left: 20px;
}
.dock-item2 img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
</style>

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

</head>
<body>
<!--top dock -->
<div class="dock" id="dock">
  <div class="dock-container">
	  <a class="dock-item" href="#"><img src="https://lh4.googleusercontent.com/-Pl7zJu-FJ0Q/UJkDHNdaVSI/AAAAAAAACmM/8myd5dwN7gQ/s800/home.png" alt="home" /><span>Home</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/email.png" alt="contact" /><span>Contact</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh4.googleusercontent.com/-veUqOCFC-G0/UJkDH7iDNqI/AAAAAAAACmw/7wR0r1EJEY8/s800/music.png" alt="music" /><span>Music</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/video.png" alt="video" /><span>Video</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/history.png" alt="history" /><span>History</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/calendar.png" alt="calendar" /><span>Calendar</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/rss.png" alt="rss" /><span>RSS</span></a>
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/rss.png" alt="rss" /><span>RSS</span></a> 
	  <a class="dock-item" href="#"><img src="https://lh5.googleusercontent.com/-7BUrcGMdKe4/UJkDFoGZGII/AAAAAAAAClw/ov3bkTjRnkg/s800/rss2.png" alt="rss" /><span>RSS2</span></a>
  </div> 
</div>

<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);

</script>

